<template>
<div class="login-page img3">
  <div class="box">
    <el-card>
        <!-- form 表单部分 -->
        <div class="img1"><img src="../../assets/loginLog.png" alt=""></div> 
         
        <el-form ref="form" :model="form" :rules="rules">

          <div class="usernameHZ">
            <div class="img2"><img src="../../assets/loinSJ.png" alt=""></div>
          <el-form-item  prop="loginName">
            <!-- <svg-icon icon-class="user" /> -->
            <el-input placeholder="     请输入用户名" v-model="form.loginName"></el-input>
          </el-form-item>
         </div>
          
           <div class="usernameHZ">
          <div class="img2"><img src="../../assets/loginS.png" alt=""></div>
          <el-form-item  prop="password">
            <el-input placeholder="     请输入密码" v-model="form.password" :type="inputType"></el-input>
          </el-form-item>
          <div class="box1" @click="showPwd" v-if="inputType === 'password'"><img src="../../assets/logineeye.jpg" alt="" ></div>
          <div class="box1" @click="showPwd" v-else><img src="../../assets/logineye.jpg" alt="" ></div>
          </div>
             
           
          <div class="usernameHZ">
          <div class="img2"><img src="../../assets/loginS.png" alt=""></div>
          <el-form-item  prop="code">
            <el-input placeholder="     请输入验证码" v-model="form.code" ref="code" ></el-input>
          </el-form-item>
          <img :src="imgurl" alt=""  class="img11"  @click="imgyzm">
          <!-- <img :src=" 'https://likede2-java.itheima.net/api/user-service/user/imageCode/' + from.clientToken " alt="" @click="createRandom"> -->

          </div>

         
            
          <el-form-item class="tc">
            <el-button type="primary" @click="submit" >立即登录</el-button>
          </el-form-item>
        </el-form>
    </el-card>

    </div>



</div>


</template>

<script>
// 调整第三方组件的样式
// 1. 直接给组件直接加一个类名 ===> 自动加在在组件的根元素上
// 定制化某一个组件（card）的样式 不会影响其他的（card）组件
// 额外加一个样式

// 2. 利用组件原有的类名+scoped
// 利用组件原有的类名 ==>  一改全改 + scoped + 穿透选择器 ::v-deep (scss)   /deep/ less
// 注意点
// scoped的作用，可以让样式在当前组件起作用（局部样式）
// 默认scoped样式，不会向下渗透，只会影响到子组件的根元素，再深就不行了
// import imgurl from '../../assets/login.png'
import { loginApi} from '@/api/user'
import axios from 'axios'
export default {
  name: 'daokdfoad',

  data () {
    return {
      form: {
        loginName:'admin',
        password:'admin',
        code:'',
        loginType:0,
        clientToken:'',
      },
      imgurl:'',

      rules: {
        loginName: [
          { required: true, message: '用户名 必填项', trigger: 'blur' },
          { min: 5, max: 11, message: '用户名长度在5-11', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码 必填项', trigger: 'blur' },
          { pattern: /^\w{5,10}$/, message: '密码 格式错误', trigger: 'blur' }
          // { min: 5, max: 11, message: '用户名长度在5-11', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '验证码 必填项', trigger: 'blur' }
        ],
      },
       inputType:'password',
    }
  },

  mounted () {
      this.imgyzm()
  },

  methods: {
    submit () {
      // 对整个 表单校验
      // form 组件的validate
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          console.log(valid)
          // 向后端 发登录请求  ==> 需要登录请求 ==> 封装/引入/使用
          try {
            // this.loading = true
            const res = await loginApi(this.form)
            // commit
            console.log(res.token);
            this.$store.commit('user/updateToken', res.token)
            // mapMutations('模块名称-user', ['updateToken'])
            this.$router.push('/')
          } finally {
            // this.loading = false
            console.log(1);
          }
          // el-button loading 属性
          // element-ui ===> 提供的自定义指令 v-loading
          // 拿到token ==> 存在Vuex里
          // 去首页
        }
      })
    },
     showPwd(){
        if (this.inputType === 'password') {
        this.inputType = 'text'
      } else {
        this.inputType = 'password'
      }
        },

        async imgyzm(){
          const random = Math.floor(Math.random() * 100)
        const res = await axios({
        url: `https://likede2-admin.itheima.net/likede/api/user-service/user/imageCode/${random}`,
        responseType: 'blob',
        })
      console.log(res)
      this.imgurl = res.config.url
      this.form.clientToken = random
            
        },

        createRandom(){
          this.form.clientToken = nanoid()
          console.log(this.form.clientToken);
        }

  }
  // 点击按钮，实现登录
  // 校验通过（form 组件的validate）之后 在向后端 发请求
  // image.png
}
</script>

<style lang="scss" scoped>

.login-page {
  min-height: 100vh;
  // flex 实现水平垂直居中
   
  .el-card {
    
    ::v-deep .el-card__body{
       position: absolute;
       width: 518px;
       height: 318px;
      top: 50%;
      left: 50%;
      margin-top: -194px;
      margin-left:-259px ;
      padding: 76px 35px 0;
      background-color: #fff;
      box-shadow: 0 3px 70px 0 rgb(30, 111, 72 , 35%);
      border-radius:10px ;
        
        .img1 {
          position: absolute ;
          left: 50%;
          margin-left: -48px;
          top: -46px;
          
           img{
              width: 96px;
             height: 96px;
            }
        }

    }
  }
  .el-form {
    padding: 0 0 0 10px;
    .usernameHZ{
      display: flex ;
      position: relative;
       ::v-deep .el-input__inner {
         position: relative;
         width: 500px;
         height: 52px;
         border-radius: 0px;
         background-color: #fff;
         color: #999;
         caret-color: #999;
      }
      .img2{
            position: absolute;
            top: 17px;
            left: 12px;
            z-index: 1111111;
            width: 12px;
            height: 12px;
            border-radius:8px 0 0 8px ;
        img{
        width: 15px;
        height: 15px;
        
      }
      }
       .box1{
          position: absolute;
          top: 5px;
          right: 15px;
          width: 20px;
          height: 50px;
          line-height: 53px;
           img{
            cursor: pointer;
           }
        }
        .box2{
           position: absolute;
          top: 1px;
          right: 119px;
        }
        
    }

    .el-CheckBox{
         display: flex;
         width: 85px;
         height: 19.5px;
         cursor: pointer;
         margin: 0px 0px 20px 25px ;
          input{
           border: 1px solid red;
         }
        span{
          margin-left: 5px;
          width: 66px;
          height: 19.5px;
          font-size: 14px;

        }
    }


  }
  .tc {
    text-align: center;

    ::v-deep .el-button--primary{
      width: 500px;
      height: 52px;
      padding: 10px 20px;
      background-color: #6578ed;
       box-shadow: 0 2px 9px 1px rgb(101, 120, 237,94%);
       border-radius: 8px;
      border: 0px;
     span{
         font-size: 16px;
         color: #332929;


       }
    }
  }

  
}

.img3{
  width: 100%;
  height: 100%;
  background-image: url(../../assets/logint.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.svg-container {
    padding: 6px 5px 6px 15px;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }

  .img11{
    position: absolute;
    right: 7px;
    width: 102px;
    height: 51px;
  }
</style>
